import * as base from "./base.js";
import instance from './request.js';
import { $, $$ } from './base.js';


window.addEventListener('load', function () {
    base.navbox();
    base.avatarimg();
    //跳转到发布房源页面
    if (localStorage.getItem('identity') == 2) {
        $('.add_fangyuan').style.display = 'block';
    }

    function animate(obj, target, callback) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            var step = (target - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (obj.offsetLeft == target) {
                clearInterval(obj.timer);
                if (callback) {
                    callback();
                }
                // callback&&callback();
            }
            obj.style.left = obj.offsetLeft + step + 'px';
        }, 15);
    }

    let userId;

    let detailid = localStorage.getItem('detailid');
    instance.get(`/home/detail/${detailid}`, {
        headers: {
            'Authorization': window.localStorage.getItem('token'),
            'Content-Type': 'application/json',
        }
    }).then(response => {
        let detailarr = response.data.data;
        console.log(detailarr);

        $('.lodger_img img').src = detailarr.user.avatarURL;
        $('.lodger_name').innerHTML = detailarr.user.name;
        $('.lodger_l_b_t_name').innerHTML = detailarr.user.name;
        $('.lodger_gain h2 span').innerHTML = detailarr.user.name;
        $('.evaluate_right_name').innerHTML = detailarr.user.name;
        $('.resource_right_name').innerHTML = detailarr.user.name;

        userId = detailarr.user.id;


        instance.get(`/user/review/${userId}`, {
            headers: {
                'Authorization': window.localStorage.getItem('token'),
                'Content-Type': 'application/json',
            }
        }).then(response => {
            let detailarr = response.data.data;
            console.log(detailarr);

            $('.evaluate_m ul').style.width = detailarr.length * 410 + 'px';
            $('.all_evaluate span').innerHTML = detailarr.length;



            async function displayItems() {
                for (const value of detailarr) {
                    const li = `<li>
                    <div>${value.content}</div>
                    <div class="evaluate_peo">
                      <img src="${value.user.avatarUrl ? value.user.avatarUrl : "https://z1.muscache.cn/defaults/user_pic-50x50.png?v=3&im_w=240"}" alt="">
                      <div class="evaluate_name">${value.user.username}</div>
                      <div class="evaluate_time">${value.createTime.substr(0, 10)}</div>
                    </div>
                  </li>`;
                    $('.evaluate_m ul').insertAdjacentHTML('beforeend', li);
                }
            }

            async function main() {
                await displayItems();
                lunbo();
            }

            main();



        })

        instance.get(`/home/landlord/${userId}`, {
            headers: {
                'Authorization': window.localStorage.getItem('token'),
                'Content-Type': 'application/json',
            }
        }).then(response => {
            let detailarr = response.data.data.homeList;
            console.log(detailarr);

            $('.resource_m ul').style.width = detailarr.length * 280 + 'px';




            async function displayItems() {
                for (const value of detailarr) {
                    const li = `<li>
                  <img src="${value.pictures[0]}" alt="">
                  <div class="resource_title ellipsis">${value.title}</div>
                  <div class="resource_introduce ellipsis">${value.introduce}</div>
                  <div class="add_remarkbox_m_star" style="top: 229px;">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true"
                          role="presentation" focusable="false"
                          style="display: block; height: 12px; width: 12px; fill: currentcolor;">
                          <path fill-rule="evenodd"
                              d="m15.1 1.58-4.13 8.88-9.86 1.27a1 1 0 0 0-.54 1.74l7.3 6.57-1.97 9.85a1 1 0 0 0 1.48 1.06l8.62-5 8.63 5a1 1 0 0 0 1.48-1.06l-1.97-9.85 7.3-6.57a1 1 0 0 0-.55-1.73l-9.86-1.28-4.12-8.88a1 1 0 0 0-1.82 0z">
                          </path>
                      </svg>
                      <span class="del_wishbox_star">${value.star ? value.star : '0'}</span>
                  </div>
              </li>`;
                    $('.resource_m ul').insertAdjacentHTML('beforeend', li);
                }
            }

            async function main() {
                await displayItems();
                houselunbo();
            }

            main();

        })

    })






    function lunbo() {
        let rightlen = $$('.evaluate_m ul li').length - 2;
        let isAnimating = false;
        if (rightlen > 0) {
            $('.evaluate_right').style.color = '#222';
            $('.evaluate_right').style.border = '1px solid #222';
        }

        $('.evaluate_right').addEventListener('click', function () {
            if (isAnimating) {
                return;
            }

            if (rightlen === 0) {
                return;
            }


            isAnimating = true;

            let middleWidth = $('.evaluate_m ul').offsetLeft;

            console.log(rightlen);

            if (rightlen >= 2) {
                animate($('.evaluate_m ul'), -808 + middleWidth, function () {
                    isAnimating = false;
                });
                rightlen -= 2;
                $('.evaluate_left').style.color = '#222';
                $('.evaluate_left').style.border = '1px solid #222';
            } else if (rightlen === 1) {
                animate($('.evaluate_m ul'), -404 + middleWidth, function () {
                    isAnimating = false;
                });
                rightlen -= 1;
                $('.evaluate_left').style.color = '#222';
                $('.evaluate_left').style.border = '1px solid #222';
            }

            if (rightlen === 0) {
                $('.evaluate_right').style.color = '#ddd';
                $('.evaluate_right').style.border = '1px solid #ddd';
            }
        });

        $('.evaluate_left').addEventListener('click', function () {
            if (isAnimating) {
                return;
            }

            if (rightlen === $$('.evaluate_m ul li').length - 2) {
                return;
            }

            isAnimating = true;

            let middleWidth = $('.evaluate_m ul').offsetLeft;

            console.log(rightlen);

            if (rightlen >= 0 && rightlen !== $$('.evaluate_m ul li').length - 3) {
                animate($('.evaluate_m ul'), 808 + middleWidth, function () {
                    isAnimating = false;
                });
                $('.evaluate_right').style.color = '#222';
                $('.evaluate_right').style.border = '1px solid #222';
                rightlen += 2;
            } else if (rightlen === $$('.evaluate_m ul li').length - 3) {
                animate($('.evaluate_m ul'), 404 + middleWidth, function () {
                    isAnimating = false;
                });
                $('.evaluate_right').style.color = '#222';
                $('.evaluate_right').style.border = '1px solid #222';
                rightlen += 1;
            }

            if (rightlen === $$('.evaluate_m ul li').length - 2) {
                $('.evaluate_left').style.color = '#ddd';
                $('.evaluate_left').style.border = '1px solid #ddd';
            }
        });
    }


    function houselunbo() {

        let rightlen = $$('.resource_m ul li').length - 3;
        let isAnimating = false;

        if (rightlen > 0) {
            $('.resource_right').style.color = '#222';
            $('.resource_right').style.border = '1px solid #222';
        }

        $('.resource_right').addEventListener('click', function () {
            if (isAnimating) {
                return;
            }
            if (rightlen == 0) {
                return;
            }


            isAnimating = true;
            let middleWidth = $('.resource_m ul').offsetLeft;
            let target;

            if (rightlen >= 3) {
                target = -837 + middleWidth;
                rightlen -= 3;
            } else if (rightlen == 2) {
                target = -558 + middleWidth;
                rightlen -= 2;
            } else if (rightlen == 1) {
                target = -279 + middleWidth;
                rightlen -= 1;
            }

            if (rightlen == 0) {
                $('.resource_right').style.color = '#ddd';
                $('.resource_right').style.border = '1px solid #ddd';
            }



            animate($('.resource_m ul'), target, function () {
                isAnimating = false;
                $('.resource_left').style.color = '#222';
                $('.resource_left').style.border = '1px solid #222';
            });
        });

        $('.resource_left').addEventListener('click', function () {
            if (isAnimating) {
                return;
            }
            console.log(rightlen);
            if (rightlen == $$('.resource_m ul li').length - 3) {
                return;
            }



            isAnimating = true;
            let middleWidth = $('.resource_m ul').offsetLeft;
            let target;

            if (rightlen == $$('.resource_m ul li').length - 5) {
                target = 558 + middleWidth;
                rightlen += 2;
            } else if (rightlen == $$('.resource_m ul li').length - 4) {
                target = 279 + middleWidth;
                rightlen += 1;
            } else if (rightlen >= 0 && rightlen != $$('.resource_m ul li').length - 3) {
                target = 837 + middleWidth;
                rightlen += 3;
            }

            if (rightlen == $$('.resource_m ul li').length - 3) {
                $('.resource_left').style.color = '#ddd';
                $('.resource_left').style.border = '1px solid #ddd';
            }



            animate($('.resource_m ul'), target, function () {
                isAnimating = false;
                $('.resource_right').style.color = '#222';
                $('.resource_right').style.border = '1px solid #222';
            });
        });

    }
})